import React, { ReactNode } from 'react';
import { NetworkStatus } from '@apollo/client';
import { Box, ListBase, SellingCard, Text, ThemeColorType } from '@nova-hf/ui';
import ContractsHeader from 'beta/components/contracts-header/ContractsHeader';
import { ErrorBanner } from 'beta/components/error/ErrorBanner';
import { formatPrice } from 'beta/utils/helpers';
import { useTranslation } from 'beta/utils/i18n';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { useContractQuery } from 'typings/graphql';

type ChangeContractContainerProps = {
  contractId: string;
  color: ThemeColorType;
};

const ChangeContractContainer = ({ contractId, color }: ChangeContractContainerProps) => {
  const router = useRouter();
  const { t } = useTranslation(['alltSaman', 'errors']);
  const customerId = router.query.customerId ?? '';
  const { data, loading, error, refetch, networkStatus } = useContractQuery({
    variables: {
      input: {
        id: contractId,
      },
    },
  });

  if (error || loading) {
    return (
      <>
        {loading && <ContractsHeader title={t('yourContract.loadingTitle')} />}
        <ErrorBanner
          eyebrowTexts={[
            t('errors:cancelContract.eyebrows.1'),
            t('errors:cancelContract.eyebrows.2'),
            t('errors:cancelContract.eyebrows.3'),
          ]}
          titles={[
            t('errors:cancelContract.titles.1'),
            t('errors:cancelContract.titles.2'),
            t('errors:cancelContract.titles.3'),
          ]}
          descriptions={[
            t('errors:cancelContract.descriptions.1'),
            t('errors:cancelContract.descriptions.2'),
            t('errors:cancelContract.descriptions.3'),
          ]}
          icon="zap"
          color="attention"
          showLoading={loading || networkStatus === NetworkStatus.refetch}
          refetchButton={{
            text: t('errors:buttons.refresh'),
            icon: 'refresh',
            onClick: () => refetch(),
          }}
          loadingComponent={
            <>
              <ListBase isLoading gap={3} />
              <ListBase isLoading gap={3} />
              <ListBase isLoading />
            </>
          }
        />
      </>
    );
  }

  const variant = data?.contract?.variant;

  return (
    <Box>
      <Text variant="pLargeBold" color="black100" marginBottom={3}>
        {t('yourContract.subtitle')}
      </Text>
      <Box>
        <Box marginBottom={8}>
          <SellingCard
            color={color}
            title={variant?.name ?? ''}
            description={t('cancelContract.defaultDescription')}
            priceSection={{
              price: formatPrice(variant?.monthlyCharge ?? 0),
              description: t('cancelContract.perMonth'),
            }}
            button={{
              text: t('yourContract.buttonText'),
              colorScheme: color,
              wrapper: (link: ReactNode) => (
                <Link
                  href={{
                    pathname: '/beta/[customerId]/askriftir/[contractId]/pakkabreyting',
                    query: { customerId: customerId, contractId: contractId },
                  }}
                  legacyBehavior
                >
                  {link}
                </Link>
              ),
            }}
          />
        </Box>
      </Box>
    </Box>
  );
};

export default ChangeContractContainer;